<template>
<body>
		<div class="wrapper">
			
			<!-- header部分 -->
			<header>
				<p>我的订单</p>
			</header>
			
			<!-- 订单列表部分 -->
			<h3>未支付订单信息：</h3>
			<ul class="order">
				<li  v-for='item in orders'   v-show='item.orderState==0' >
					<div class="order-info">
						<p>
							{{item.business.businessName}}
							<i class="fa fa-caret-down"></i>
						</p>
						<div class="order-info-right" >
							<p>&#165;{{item.orderTotal}}</p>
							<div class="order-info-right-icon" @click='gotopayment(item.businessId,item.orderId)'>去支付</div>
						</div>
					</div>
					<ul class="order-detailet" >
						<ul v-for='fd in item.orderdetailetList' >
							<li v-for='bf in foods'   v-show='fd.foodId==bf.foodId'>
								<p>{{bf.foodName}} x {{fd.quantity}}</p>
								<p>&#165;{{bf.foodPrice*fd.quantity}}</p>
							</li>
						</ul>
						<li>
							<p>配送费</p>
							<p>&#165;{{item.business.deliveryPrice}}</p>
						</li>
					</ul>
				</li>
			</ul>
			
			<h3>已支付订单信息：</h3>
			<ul class="order">
				<li v-for='item in orders' v-show='item.orderState==1' >
					<div class="order-info">
						<p>
							 {{item.business.businessName}}
							<i class="fa fa-caret-down"></i>
						</p>
						<div class="order-info-right">
							<p>&#165;{{item.orderTotal}}</p>
						</div>
					</div>
					<ul class="order-detailet" >
						<ul v-for='fd in item.orderdetailetList' >
							<li v-for='bf in foods'   v-show='fd.foodId==bf.foodId'>
								<p>{{bf.foodName}} x {{fd.quantity}}</p>
								<p>&#165;{{bf.foodPrice*fd.quantity}}</p>
							</li>
						</ul>
						<li>
							<p>配送费</p>
							<p>&#165;{{item.business.deliveryPrice}}</p>
						</li>
					</ul>
				</li>
			</ul>
			
			<!-- 底部菜单部分 -->
			<Footer></Footer>
			
		</div>	
	</body>
</template>

<script>
import Footer from '../components/Footer.vue'

export default({
    name:'OrderList',
    data(){
        return {
            user:{},
            orders:[],
            foods:[]
        }
    },
    components:{
        Footer
    },
    created()
    {
       this.user=this.$getSessionStorage('user');
	   this.$axios.post('OrdersController/listOrdersByUserId',this.$qs.stringify({
		   userId:this.user.userId
	   })).then(response=>{
		   this.orders=response.data;
		   for(let item of this.orders)
		   {
			   this.listFood(item.business.businessId);
		   }
	   }).catch(error=>{
		   console.error(error);
	   });

    },
	beforeUpdate:function(){
		//获取显示隐藏按钮DOM数组
		let showBtnArr = document.getElementsByClassName('fa-caret-down');
		//获取订单明细DOM数组
		let detailetBoxArr = document.getElementsByClassName('order-detailet');
		//设置默认所有订单明细都隐藏
		for(let i=0;i<detailetBoxArr.length;i++){
			detailetBoxArr[i].style.display='none';
		}
		
		for(let i=0;i<showBtnArr.length;i++){
			showBtnArr[i].onclick = function(){
				if(detailetBoxArr[i].style.display=='none'){
					detailetBoxArr[i].style.display='block';
				}else{
					detailetBoxArr[i].style.display='none';
				}
			}
		}
	},
	methods:{
		listFood(BusinessId){
			this.$axios.post('FoodController/listFoodByBusinessId',this.$qs.stringify({
				businessId:BusinessId
			})).then(response=>{
				this.foods=response.data;
			}).catch(error=>{
				console.error(error);
			});
		},
		gotopayment(businessId,orderId)
		{
			this.$router.push({path:'/payment',query:{businessId:businessId,orderId:orderId}});
		}
		
	}
})
</script>



<style scoped>
/****************** 总容器 ******************/
.wrapper{
	width: 100%;
	height: 100%;
}

/****************** header部分 ******************/
.wrapper header{
	width: 100%;
	height: 12vw;
	background-color: #0097FF;
	color: #fff;
	font-size: 4.8vw;
	
	position: fixed;
	left: 0;
	top: 0;
	z-index: 1000;
	
	display: flex;
	justify-content: center;
	align-items: center;
}

/****************** 历史订单列表部分 ******************/
.wrapper h3{
	margin-top: 12vw;
	box-sizing: border-box;
	padding: 4vw;
	font-size: 4vw;
	font-weight: 300;
	color: #999;
}
.wrapper .order{
	width: 100%;
}
.wrapper .order li{
	width: 100%;
}
.wrapper .order li .order-info{
	box-sizing: border-box;
	padding: 2vw 4vw;
	font-size: 4vw;
	color: #666;
	
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.wrapper .order li .order-info .order-info-right{
	display: flex;
}
.wrapper .order li .order-info .order-info-right .order-info-right-icon{
	background-color: #f90;
	color: #fff;
	border-radius: 3px;
	margin-left: 2vw;
	user-select: none;
	cursor: pointer;
}

.wrapper .order li .order-detailet{
	width: 100%;
}
.wrapper .order li .order-detailet li{
	width: 100%;
	box-sizing: border-box;
	padding: 1vw 4vw;
	color: #666;
	font-size: 3vw;
	
	display: flex;
	justify-content: space-between;
	align-items: center;
}
/****************** 底部菜单部分 ******************/
.wrapper .footer{
	width: 100%;
	height: 14vw;
	border-top: solid 1px #DDD;
	background-color: #fff;
	
	position: fixed;
	left: 0;
	bottom: 0;
	
	display: flex;
	justify-content: space-around;
	align-items: center;
}
.wrapper .footer li{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	
	color: #999;
	user-select: none;
	cursor: pointer;
}
.wrapper .footer li p{
	font-size: 2.8vw;
}
.wrapper .footer li i{
	font-size: 5vw;
}
</style>
